<template>
    <a-spin :spinning="loading">
        <a-row style="margin:1.5em 1.5em">
            <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);padding-bottom:15px;">
                <div style="padding:17px 22px;" class="size14 cont">{{ $t('基础信息') }}</div>
                <div class="line"></div>
                <div style="padding:17px 22px;">
                    <a-row class="size14">
                        <a-col :span="2" class="shallow">
                            {{ $t('目录路径') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ quotaItem.dir }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('配额类型') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ typeMap.get(quotaItem.type) }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('用户组') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ name }}
                        </a-col>
                    </a-row>
                    <a-row class="size14 mt-14">
                        <a-col :span="2" class="shallow">
                            {{ $t('配额方式') }}:
                        </a-col>
                        <a-col :span="22" class="cont">
                            {{ modeMap.get(quotaItem.mode) }}
                        </a-col>
                    </a-row>
                </div>
            </div>
        </a-row>

        <a-row style="margin:1.5em 1.5em">
            <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);padding-bottom:15px;">
                <div style="padding:17px 22px;" class="size14 cont">{{ $t('配额详情') }}</div>
                <div class="line"></div>
                <div style="padding:17px 22px;">
                    <div>
                        <a-input style="width: 298px;" v-model="input" :placeholder="$t('Enter') + $t('用户名称')" />
                        <a-button type='primary' style="margin-left: 8px;" @click="handleSearch">
                            <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                            {{ $t('查询') }}
                        </a-button>
                    </div>
                    <a-table style="margin-top:16px" rowKey="id" :columns='columns' :loading="loading"
                        :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small'
                        :scroll="{ x: 1340 }">
                        <template slot="use_size" slot-scope="use_size, record">
                            <span>{{ formatBytes(use_size) }} / {{ formatBytes(record.max_bytes) }}</span>
                        </template>
                        <template slot="size_percent" slot-scope="size_percent, record">
                            <div style="display: flex;align-items: center;">
                                <Percent :percent="percent(record.use_size, record.max_bytes)" :color="getProgressColor(percent(record.use_size, record.max_bytes))" />
                                {{ percent(record.use_size, record.max_bytes) }}%
                            </div>
                        </template>
                        <template slot="use_files" slot-scope="use_files, record">
                            <span>{{ numberFormat(use_files) }} / {{ numberFormat(record.max_files) }}</span>
                        </template>
                        <template slot="file_percent" slot-scope="file_percent, record">
                            <div style="display: flex;align-items: center;">
                                <Percent :percent="percent(record.use_files, record.max_files)" :color="getProgressColor(percent(record.use_files, record.max_files))" />
                                {{ percent(record.use_files, record.max_files) }}%
                            </div>
                        </template>
                    </a-table>
                </div>
            </div>
        </a-row>
    </a-spin>
</template>
<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import EmptyData from '@/components/common/EmptyData'
import Percent from "./percent";

export default {
    components: { EmptyData, NoAuthPage, Percent },
    props: ['id', 'name'],
    data() {
        return {
            typeMap: new Map([
                [1, "目录配额"],
                [2, "用户配额"],
                [3, "用户组配额"],
            ]),
            modeMap: new Map([
                [1, "用户子目录配额"],
                [2, "用户组目录配额"],
            ]),
            userMap: new Map([
                [1, "本地用户"],
                [2, "AD用户"],
            ]),
            quotaItem: {
                dir: '',
                type: '',
                mode: '',
            },
            loading: false,
            dataList: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                current: 0,
                pageSize: 10,
                total: 0,
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showQuickJumper: true,
                showSizeChanger: true,
                pagination: ['5', '10', '20', '25'],
                onShowSizeChange: (page, page_size) => {
                    this.pagination.current = page
                    this.pagination.pageSize = page_size
                },
                onChange: async (page, page_size) => {
                    this.pagination.current = page
                    this.pagination.pageSize = page_size
                },
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('用户'), dataIndex: 'user_name', key: 'user_name', width: 160, fixed: 'left', },
                { title: this.$t('已用容量/容量配额数'), dataIndex: 'use_size', key: 'use_size', scopedSlots: { customRender: 'use_size' } },
                { title: this.$t('容量使用率'), scopedSlots: { customRender: 'size_percent' } },
                { title: this.$t('已用文件数/文件配额数'), dataIndex: 'use_files', key: 'use_files', scopedSlots: { customRender: 'use_files' } },
                { title: this.$t('文件数使用率'), scopedSlots: { customRender: 'file_percent' } },
            ],
            input: '',
        }
    },
    async mounted() {
        await this.getList(this.$props.id)
    },
    methods: {
        async getList(id) {
            this.loading = true
            const { data } = await this.$api.directory.getQuotaDetailApi(id)
            if (data.flag == 1) {
                this.model(data.id) //返回模板
                this.notice(data.id, data.params, data.flag) //通知列表显示
            } else {
                const list = []
                this.quotaItem = data.params
                this.dataList = data.params.users
                this.copyList = data.params.users
            }
            this.loading = false
        },
        handleSearch() {
            this.loading = true
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.user_name.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
            this.loading = false
        },
        formatBytes(bytes, decimals = 2) {
            if (bytes === 0 || bytes === null) return '-';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        },
        numberFormat(value) {
            if (value === 0 || value === null) return '-';
            const param = {};
            let k = 10000,
                sizes = ['个', '万', '亿'],
                i;
            if (value < k) {
                param.value = value;
                param.unit = '个';
            } else {
                i = Math.floor(Math.log(value) / Math.log(k));
                param.value = ((value / Math.pow(k, i)));
                param.unit = sizes[i];
            }
            return param.value + param.unit;
        },
        percent(value1, value2) {
            const result = (value1 / value2 * 100).toFixed(2)
            if (value1 <= 0 || value2 <= 0) return '0.00'
            else if (result > 100) return '100.00'
            else return result
        },
        getProgressColor(successPercent) {
            let color = ''
            if (successPercent < 80) {
                color = '#006db8'
            } else if (successPercent >= 80) {
                color = '#bc2429'
            }
            return color
        },
    }
}
</script>


<style scoped>
.size14 {
    font-size: 14px;
}

.line {
    width: 100%;
    border-bottom: solid 1px #cccccc;
    line-height: 0.9;
}

.shallow {
    color: #666666;
}

.cont {
    color: #333333;
    /* font-weight: bolder; */
}

::v-deep .ant-table-small {
    overflow-y: auto;
    max-height: 200px;
}
</style>
